<template>
  <div class="echarts h-full">
    <ECharts
      v-if="option"
      :option="option"
      :id="`bar` + props.id"
      ref="barEChartsRef"
      :onClick="handleClick"
    />
  </div>
</template>

<script lang="ts" setup>
const emit = defineEmits(["handle-click"]);
const props = defineProps({
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {
        title: "自定义柱状图",
        ydata: [50, 26, 10, 90, 85, 77],
        xdata: ["制造业", "建筑业", "农林牧渔", "房地产", "金融业", "居民服务"],
        month: 12,
      };
    },
  },
});
const { params, id, title } = toRefs(props);

function handleClick(param: any) {
  emit("handle-click", param.dataIndex);
}

const option = ref({});

watch(
  () => params.value,
  (newValue) => {
    const xdata1 = JSON.parse(JSON.stringify(newValue?.xdata ?? []));
    const ydata1 = JSON.parse(JSON.stringify(newValue?.ydata ?? []));

    option.value = {
      title: {
        text: title.value,
        x: "center",
        y: "15",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            //   fontFamily: "DINPro",
            fontSize: 14,
          },
        },
        textStyle: {
          color: "#666",
          // fontFamily: "DINPro",
          fontSize: 14,
        },
        //   formatter: (params: any) => {
        //     var relVal = props.params.month + "月" + params[0].name + "日";
        //     for (var i = 0, l = params.length; i < l; i++) {
        //       relVal +=
        //         "<br/>" +
        //         params[i].seriesName +
        //         " " +
        //         params[i].marker +
        //         " " +
        //         params[i].value;
        //     }
        //     return relVal;
        //   },
      },
      grid: {
        top: "22%",
        right: "28",
        left: "10",
        bottom: "7%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "value",
          name: "%",
          // data: props.params.xdata,
          axisLine: {
            lineStyle: {
              color: "rgba(0,0,0,0.2)",
            },
          },
          axisLabel: {
            color: "#666",
            fontSize: 12,
          },
          // axisLabel: {
          //   formatter: "日期：{value}",
          // },
          axisTick: {
            //坐标轴刻度颜色  x和y不交叉
            show: true,
          },
        },
      ],
      yAxis: [
        {
          type: "category",
          name: "",
          axisLabel: {
            //   formatter: "{value}",
            color: "#666",
            fontSize: 12,
            //   fontFamily: "DINLight",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(0,0,0,0.12)",
              type: "dashed",
            },
          },
          data: xdata1,
        },
      ],
      series: [
        {
          name: "关闭率（%）",
          type: "bar",
          data: ydata1,
          barWidth: "20px",
          itemStyle: {
            color: "#507AFF",
          },
          label: {
            show: true,
            formatter: "{c}%",
            offset: [13, 0],
          },
        },
      ],
    };
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  //   box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
}
</style>
